#{extends 'noTab.html' /}
#{set title:'New User Sign Up' /}
<h1 class="viewTitle">New User Sign Up</h1> 
<div class="viewContent">
		#{ifErrors}
			<h1 color:red>All Fields are required</h1>
		#{/ifErrors}
		
	
		#{form @Users.createUser(), enctype:'multipart/form-data'}
			<input type="file" name="picture.image" />
		
			<div class="formEntry">
			<div class="formLabel">
			<label>Full Name</label>
			</div>
			<input type="text" name="name" value="${flash.name}"></input>
			<label class="error">#{error 'name' /}</label>
			<div class="clear"></div>
			</div>
			<div class="formEntry">
			<div class="formLabel">
			<label>Gender</label>
			</div>
			<input type="radio" name="gender" value="male" /><label> Male</label>
			<input type="radio" name="gender" value="female" /><label> Female</label>
			<label class="error">#{error 'gender' /}</label>
			<div class="clear"></div>
			</div>
			<div class="formEntry">
			<div class="formLabel">
			<label>User Name</label>
			</div>
			<input type="text" name="userName" value="${flash.UserName}"></input>
			<label class="error">#{error 'userName' /}</label>
			<div class="clear"></div>
			</div>
			<div class="formEntry">
			<div class="formLabel">
			<label>Password</label>
			</div>
			<input type="password" name="password" value="${flash.password}"></input>
			<label class="error">#{error 'password' /}</label>
			<div class="clear">
			</div>
			</div>
			<div class="formEntry">
			<div class="formLabel">
			<label>Password Confirmation</label>
			</div>
			<input type="password" name="password2" value="${flash.password2}"></input>
			<label class="error">#{error 'password2' /}</label>
			<div class="clear">
			</div>
			</div>
			<div>
				<div class="formEntry">
				<div class="formLabel">
				<label for="dateOfBirth">Date of Birth </label> 
				</div>
				<input class= "dateOfBirth" type="text" name="dateOfBirth" value="${flash.dateOfBirth}" id="dateOfBirth"></input>
				<label class="error">#{error 'dateOfBirth' /}</label>
				<div class="clear">
				</div>
			</div>
			</div>
			<script type="text/javascript" charset="utf-8">
        		$(".dateOfBirth").datepicker({dateFormat:'yy-mm-dd', showAnim:'fadeIn'})
			</script>
			<div class="formEntry">
			<div class="formLabel">
			<label>Email</label>
			</div>
			<input type="text" name="email" value="${flash.email}"></input>
			<label class="error">#{error 'email' /}</label>
			<div class="clear">
			</div>
			</div>
			<div class="formEntry">
			<div class="formLabel">
			<label>Address</label>
			</div>
			<input type="text" name="address"></input>
			<div class="clear">
			</div>
			</div>
			<div>
    			<div class="formEntry">
				<div style="width: auto; float: none;">
    			<label for="code">Please type the code below: </label>
    			</div>
    			<div style="width: auto; float: none;" style="background-color:yellow;">
    			<img src="@{Users.captcha(randomID)}" />
    			</div>
    			<input type="text" name="code" id="code" size="18" value="${flash.code}" />
    			<label class="error">#{error 'code' /}</label>
    			<input type="hidden" name="randomID" value="${randomID}" />
				</div>
			</div>
			<input type="submit" value="submit" id="submit"></input>
		#{/form}
		</div>
